<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item class="breadcrumb"><i class="el-icon-tickets"></i>数据统计</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- <el-row :gutter="20">
			<el-col :span="10">
				<div class="block">
					<span class="demonstration"></span>
					<el-date-picker type="datetime" placeholder="选择日期时间">
					</el-date-picker>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="right">
					<el-input placeholder="请输入内容">
					</el-input>
					<el-button icon="el-icon-search" type="primary"></el-button>
				</div>
			</el-col> -->
		<!-- </el-row> -->
		<!-- 上面部分 -->
		<el-row :gutter="24">
			<el-col :span="6">
				<el-card>
					<div id="main1">
						成绩情况
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div id="main2">
						人数
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div id="main3">
						正确率
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div id="main4">
						错误率
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 下面部分 -->
		<el-row :gutter="24">
			<el-col :span="12">
				<el-card>
					<div id="tu1"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<div id="tu2"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'dataTotal',
		data() {
			return {

			}
		},
		mounted() {
			var myChart = this.$echarts.init(document.getElementById("tu1"));
			myChart.setOption({
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(180, 180, 180, 0.2)'
							}
						}]
					});
				var myChart = this.$echarts.init(document.getElementById("tu2")); myChart.setOption({
					xAxis: {},
					yAxis: {},
					series: [{
						symbolSize: 20,
						data: [
							[10.0, 8.04],
							[8.07, 6.95],
							[13.0, 7.58],
							[9.05, 8.81],
							[11.0, 8.33],
							[14.0, 7.66],
							[13.4, 6.81],
							[10.0, 6.33],
							[14.0, 8.96],
							[12.5, 6.82],
							[9.15, 7.2],
							[11.5, 7.2],
							[3.03, 4.23],
							[12.2, 7.83],
							[2.02, 4.47],
							[1.05, 3.33],
							[4.05, 4.96],
							[6.03, 7.24],
							[12.0, 6.26],
							[12.0, 8.84],
							[7.08, 5.82],
							[5.02, 5.68]
						],
						type: 'scatter'
					}]
				})
			}
		}
</script>

<style>
	.el-row {
		margin-bottom: 20px;
		width: 100%;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.breadcrumb {
		font-size: 16px;
		margin-bottom: 15px;
	}

	/* .right {
		display: flex;
	} */

	#main1,
	#main2,
	#main3,
	#main4 {
		width: 400px;
		height: 200px;
	}

	#tu1,
	#tu2 {
		width: 600px;
		height: 400px;
	}
</style>
